<template>
  <div class="songlist">
    <van-tabs :before-change="beforeChange">
      <van-tab v-for="(item, index) in listdata" :title="item" :key="index">
        <div class="gedan">
          <van-grid class="good" v-for="item in list" :key="item.id">
            <div class="albumbox" @click="tiaozhuan">
              <div><img :src="item.imgurl" alt="" /></div>
              <div>
                <span>{{ item.dissname }}</span>
              </div>
            </div>
          </van-grid>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data: () => ({
    list: [],
    listdata: ["推荐", "官方", "专区"],
    parmas: 10000000,
  }),
  methods: {
    beforeChange(index) {
      // 返回 false 表示阻止此次切换
      if (index === 0) {
        this.parmas = 10000000;
        this.getSongLists(this.parmas);
        return true;
      } else if (index === 1) {
        this.parmas = 167;
        this.getSongLists(this.parmas);
        return true;
      } else {
        this.parmas = 169;
        this.getSongLists(this.parmas);
        return true;
      }
    },
    async getSongLists(id) {
      const res = await this.$http.getSongLists(id);
      this.list = res.data.response.data.list;
    },
    tiaozhuan() {
      this.$router.push({
        path: "/hallmusic",
        name: 'songList',
         query: {
          dissid: this.list.dissid
        }
      });
    },
  },
  created() {
    this.getSongLists(10000000);
  },
};
</script>
<style lang="scss" scoped>
.van-tab {
  color: #58d59d;
}
.gedan {
  display: flex;
  flex-wrap: wrap;
  width: 360px;
  .good {
    width: 120px;
    font-size: 10px;
    span {
      width: 100px;
    }
    .albumbox {
      width: 100px;
      margin: 11px;
    }
    img {
      border-radius: 5px;
      width: 100px;
      height: 100px;
    }
  }
}
</style>